<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 渲染学生页面 -->
    一 ·获取学生列表 1.封装函数，以便增删改查后重新渲染页面。
    2.调取接口，获得数据,解构得到学生信息数组,通过map映射,将内容给到tbody。
    页面加载完成调用渲染页面函数。 二·删除信息
    1.利用事件委托，给.list绑定点击事件
    2.判断点击的这个元素是否有bi-trash这个类名 3.然后获取id的自定义属性
    4.向后端获取数据，通过数据来判断是否删除成功 5.并重新调用渲染页面函数
    三.添加点击按钮 1.获取点击按钮元素 2.绑定点击事件
    3.点击确定的时候通过自定义属性来判断是新增还是编辑,显示是add就是新增,显示id就是编辑
    4.显示弹窗 四.新增编辑学员信息
    获取省市区数据给到表单中省市区，并且省市区联动。当省份内容改动时，重新调用市、区接口，更新市、区表单内容。当市内容改动时，重新调用区接口，更新区表单内容
    五.提交表单
    1.编辑按钮利用事件委托，判断点击元素是否有修改特有的自定义属性，如果有就修改标题，并获取自定义id属性
    2.提交按钮绑定点击事件，获取提交按钮自定义属性值，利用插件serialize获取表单内容，修改格式，并向后端发送数据请求
    3.通过返回的结果判断，如果是add元素就表示成功，并且重新调取渲染页面函数，否则就修改接口并且重新渲染页面
  </body>
</html>
